import { Button, Grid, Space } from "@arco-design/web-react";
import "./index.scss";
import { IconQuestionCircleFill } from "@arco-design/web-react/icon";
import YearMonthSelect from "@/components/YearMonthSelect";
import CustomCalendar from "@/components/CustomCalendar";
import LineChartComp from "./components/LineChartComp";
import PieChartComp from "./components/PieChartComp";
import ProgressComp from "./components/ProgressComp";
import TodoListComp from "./components/TodoListComp";

const Row = Grid.Row;
const Col = Grid.Col;

export default function Index() {
  const onChange = (value: string) => {
    console.log(value);
  };

  return (
    <div className="w-full h-full index-page">
      <Row className="grid-demo" gutter={10}>
        <Col span={18}>
          <div
            style={{ height: "60%" }}
            className="bg-white rounded-md flex flex-col overflow-hidden"
          >
            <div className="px-8 py-4 flex justify-between items-center text-gray-600 font-bold ">
              <Space>
                <div>设备进出库情况</div>
                <IconQuestionCircleFill />
              </Space>

              <YearMonthSelect onChange={onChange} />
            </div>
            <div className="flex-1 overflow-hidden">
              <LineChartComp></LineChartComp>
            </div>
          </div>
          <Row
            style={{
              height: "calc(40% - 10px)",
              marginTop: "10px",
              overflow: "hidden",
            }}
            gutter={10}
          >
            <Col span={12}>
              <div className="bg-white h-full rounded-md flex flex-col overflow-hidden">
                <div className="px-8 py-4 flex justify-between items-center text-gray-600 font-bold ">
                  <div>设备类型</div>
                  <YearMonthSelect onChange={onChange} />
                </div>

                <div className="flex-1 overflow-hidden">
                  <PieChartComp></PieChartComp>
                </div>
              </div>
            </Col>
            <Col span={12}>
              <div className="bg-white h-full rounded-md flex flex-col overflow-hidden">
                <div className="px-8 py-4 flex justify-between items-center text-gray-600 font-bold ">
                  <div>占比情况</div>
                  <Button>查看更多</Button>
                </div>

                <div className="flex-1 overflow-hidden flex">
                  <ProgressComp></ProgressComp>
                </div>
              </div>
            </Col>
          </Row>
        </Col>
        <Col span={6}>
          <div style={{ height: "100%" }} className="bg-white rounded-md">
            <CustomCalendar />
            <div>
              <div className="flex px-4 py-1 justify-between items-center text-gray-600 font-bold ">
                <div>待办事项</div>
                <Button>查看更多</Button>
              </div>
              <TodoListComp />
            </div>
          </div>
        </Col>
      </Row>
    </div>
  );
}
